import React, { useState } from 'react';
import { List, Icon } from "antd-mobile";
import Btn from '../../../components/btn/Btn'

import './event.less';

const Item = List.Item;
const Brief = Item.Brief;

function Radio(props) {
  let active = props.active ? 'h-active' : ''
  return (
    <p className={'h-radio g-round '+ active}>
      {
        active ? <Icon type='check'></Icon> : ''
      }

    </p>
  )
}

function Event() {
  const [active,setActive] = useState(0);

  return (
    <div className='v-other-event' >
      <List>
        <Item multipleLine className='g-mb10 g-bdrs12'
              onClick={()=>setActive(1)}
              extra={<Radio active={active===1} />}>
          跟顾客预约脱毛体验时间
          <Brief>2020/08/08</Brief>
        </Item>
        <Item multipleLine className='g-mb10 g-bdrs12'
              onClick={()=>setActive(2)}
              extra={<Radio active={active===2} />}>
          跟顾客预约脱毛体验时间
          <Brief>2020/08/08</Brief>
        </Item>
        <Item multipleLine className='g-mb10 g-bdrs12'
              onClick={()=>setActive(3)}
              extra={<Radio active={active===3} />}>
          跟顾客预约脱毛体验时间
          <Brief>2020/08/08</Brief>
        </Item>
      </List>

      <Btn type='primary'>新增待办</Btn>
    </div>
  )
}

export default Event;